<template>
  <div class="w-auto bg-gray-100">
    <div class="align-middle text-center py-3 hidden lg:block">
      <transition name="fade-in">
        <span class="text-xs mx-4 text-gray-500">
          Copyright &copy; 2022 Edward.Zhu | Powerd by Gitee |
          <a href="http://beian.miit.gov.cn/" target="_blank">{{ icpNo }}</a>
        </span>
      </transition>
    </div>
    <div class="align-middle text-center py-3 block lg:hidden">
      <transition name="fade-in">
        <div class="text-xs text-gray-500">
          <div>Copyright &copy; 2022 Edward.Zhu</div>
          <div>Powerd by Gitee</div>
          <div>
            <a href="http://beian.miit.gov.cn/" target="_blank">{{ icpNo }}</a>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "bottomBar",
  computed: {
    ...mapGetters(["icpNo"]),
  },
};
</script>

<style scoped>
.w720 {
  width: 720px;
  margin: 0 auto;
}
</style>
